<template>
    <div>
			<div v-if="loadmorexian">
				<!--筛选栏-->
				<div  class="rel" >

					<div class="pos">
						<div style="overflow-y:scroll;max-height:5rem">
						<!--第一个-->
							<transition name="fade">
								<div  v-if="quanbu" style="background: #fff">
									<div class="xia" v-for="(item,index) in fenlei" @click="xi(item)">
										<span :class="item.name == pracite?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite">
										<p></p>
									</div>
								</div>
							<!--第二个-->
								<div  v-if="quanbu1" style="background: #fff">
									<div class="xia" v-for="(item,index) in arr" @click="xi1(item)">
										<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
										<p></p>
									</div>
								</div>
							</transition>
						</div>
					</div>

					<div class="chen-flex">
						<!--第一个联动-->
						<div class="shang" @click="btn()" >
							<p :class="quanbu?'blue':'gray'">{{pracite}}</p>
							<img :src="quanbu?imgSrc1:imgSrc2" alt="">
						</div>

						<!--第二个联动-->

						<div class="shang" @click="btn1()" style="margin-left: 1rem">
							<p :class="quanbu1?'blue':'gray'">{{pracite1}}</p>
							<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
						</div>

					</div>
				</div>

				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<div id='dataList0'>
						<div class="special" @click="xiang(item)" v-for="(item,index) in tab0.list">
							<img :src="img+item.thumb" alt="">
							<p>{{item.name}}</p>
							<span>{{item.sales}}人已加入</span>
							<span class="a1" v-if="item.price==0">免费</span>
							<span class="a" v-else>￥{{item.price}}</span>
							<span>共{{item.count}}节课</span>
							<p></p>
						</div>
					</div>
			  </mescroll-vue>

			</div>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>

</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Zhuantike",
				components: {
				  MescrollVue
				},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						imgSrc1: require("../../assets/img/search/shang.png"), 
						imgSrc2: require("../../assets/img/search/bto.png"), 
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						noloadzheng:false,
						loadmorexian:false,
            img:this.$store.state.img,
            page:1,
            bol:true,
            arr: [
              {name:'最新',id:'new'},
              {name:'免费',id:'free'},
              {name:'最热',id:'hot'},
              {name:'综合',id:'sort'}
            ],
            quanbu:false,
            quanbu1:false,
            pracite:'全部专题',
            pracite1:'综合',
            fenlei:[],
            cid:'',
            field:'',
            liebiao:[],
            searchBarFixed:false,
          }
      },
      methods:{

        btn(){
          this.quanbu = !this.quanbu;
          this.quanbu1 = false;
          this.quanbu2 = false;
        },
        btn1(){
          this.quanbu1 = !this.quanbu1;
          this.quanbu = false;
          this.quanbu2 = false;
        },
        xi(item){
          this.pracite = item.name;
          this.cid = item.id;
          // this.again();
          this.quanbu = !this.quanbu;
					this.changeTab();
        },
        xi1(item){
          this.pracite1 = item.name;
          this.field = item.id;
          // this.again();
          this.quanbu1 = !this.quanbu1;
					this.changeTab();
        },
        xiang(item){
            this.$router.push({
              path:'/specialtopic',
              query:{
                stid:item.id
              }
            })
        },

				getTabData (tabType) {
				  if (tabType == null) tabType = this.tabType;
				  if (tabType === 0) {
				    return this.tab0;
				  }
				},
				changeTab () {
					this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
					this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				mescrollInit0 (mescroll) {
				  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},

				getMescrollUp (tabType) {
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						   empty: {
						     warpId: 'dataList0', // 父布局的id;
						     icon: this.imgSrc, // 图标,默认null
						     tip: '暂时没有找到您所需要的内容…', // 提示

						   },
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
				  if (mescroll.tabType === 0) {
				    // 全部
				    that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						that.axios.get(that.$store.state.url +'LiveSpec/specList',{
							 params:{
								cid:that.cid,
								field:that.field,
								page: page.num,
								limit:page.size
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							that.loadmorexian = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
									var curPageData = res.data.data.lists;
									mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
									 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
									 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
									 // this.tab0.list=res.data.data.order
							}

						})
				  }
				}

      },
      mounted() {
		  this.sdk.getJSSDK('','',this.$store.state.url);	

        //专题分类
        this.axios.get(this.$store.state.url +'live/getSpecClass').then(res=>{
					this.loadmorexian = true;
          if (res.data.errcode == 0||res.data.errcode == '0'){
            this.fenlei = res.data.data;
            var obj = {
              name:'全部专题',
              id:''
            }
            this.fenlei.unshift(obj)
          }
        })

      }
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0.8rem;
	  bottom: 0;
	  height: auto;
	}
	.chen-flex{
		position: fixed;
    width: 100%;
    height: .84rem;
    top: 0;
		display: flex;
		justify-content: space-around;
		z-index: 9999999;
		background: #fff;
	}
  .rel{
    position: relative;
    background: #fff;
  }
  .special{
    width: 92%;
    margin: auto;
    margin-top: 0.3rem;
    position: relative;
  }
  .special img{
    width: 100%;
    height: 3.88rem;
    border-radius:0.08rem;
  }
  .special p{
    font-size: 0.28rem;
    color: #333333;
    margin-top: 0.2rem;
  }
  .special span:nth-child(3){
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    float: left;

  }
  .special span{
    margin-top: 0.2rem;
  }
  .a{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: right;
  }
  .a1{
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    line-height:0.32rem;
    float: right;
  }
  .special span:nth-child(5){
    font-size:0.24rem;
    line-height:0.32rem;
    margin-right: 0.2rem;
    float: right;
    color: #FF0214;
  }
  .special p:nth-child(6){
    width: 100%;
    height:0.02rem;
    margin-top: 0.7rem;
    background:rgba(237,237,237,1);
  }
  .shang{
    width: 20%;
    /* height: 0.5rem;
		 */
		line-height: .84rem;
    display: flex;
    align-items: center;
  }

  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{
    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.13rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;

    /*margin-top: 0.2rem;*/
    padding-top: 0.2rem;
  }
  .spanspan{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
  /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;
    position: fixed;
    top: 0.84rem;
    left: 0;
    z-index: 999999;
  }
  /*.one{*/
  /*display: inline-block;*/
  /*}*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
